<template>
  <div class="student">
    <!-- <app-header></app-header> -->
    <div class="main">
      <div class="topDiv">
        <label>{{departName}}</label><!--<span class="btn1" @click="$router.push({name:'chooseUnit',query:{id:trainClassId}})">选择单位</span>-->
      </div>
      <div style="width:100%;height:5px;background:#eeeeee"></div>
      <group>
        <popup-picker :title="title2" :data="cityLists" placeholder="请选择区域" disabled :columns="2" v-model="model.area" show-name></popup-picker>
        <popup-picker :title='title3'
                      :data="industryList"
                      v-model="model.industryId"
                      placeholder="请选择行业" show-name disabled>
        </popup-picker>
        <popup-picker :title='title4'
                      :data="workList"
                      v-model="model.workType"
                      placeholder="请选择工种" show-name required ref="workType" disabled>
        </popup-picker>
        <x-input title="手机号" text-align="right" v-model="model.telephone" placeholder="请输入手机号" required ref="telephone" is-type="china-mobile"></x-input>
        <x-input title="身份证号" text-align="right" v-model="model.idcard" placeholder="请输入身份证号" required ref="idcard" disabled></x-input>
        <x-input title="姓名" text-align="right" v-model="model.username" placeholder="请输入姓名" :show-clear="false" required ref="username" disabled></x-input>
        <popup-picker :title='title5'
                      :data="sexList"
                      v-model="model.sex"
                      placeholder="请选择性别" ref="sex" disabled>
        </popup-picker>
      </group>
      <div class="tips">注：1.无单位所属人员请选择“其它”单位；2.若系统内无您的单位名称，可将您的单位名称、所在区域、所属行业、联系电话、地址及社会信用代码发送至邮箱175864173@qq.com申请添加单位，工作人员将在1~2个工作日内为您处理</div>
      <span class="btn" @click="save">完 &nbsp;&nbsp; 成</span>
    </div>
  </div>
</template>

<script>
  import Header from "../../components/header";
  import { XInput, Group, XButton, Cell, Selector, CellBox, PopupPicker } from "vux";
  import { getAreaList } from "@/api/depart";
  import { GetUserManagerInfo, GetWorkTypeList, CreateorUpdate } from "@/api/UserManager";
  import { mapGetters } from 'vuex';
  import { applyTrainClass } from '@/api/trainClass';
  export default {
    components: {
      "app-header": Header,
      XInput,
      XButton,
      Group,
      Cell,
      Selector,
      CellBox,
      PopupPicker
    },
    data() {
      return {
        title1: '所在市州',
        title2: '所在区域',
        title3: '行业',
        title4: '工种',
        title5: '性别',
        cityLists: [],
        citys2: [],
        businessList: [['全部', '建筑', '电力', '其他']],
        business: [],
        workList: [['全部', '焊接', '水电', '其他']],
        work: [],
        sexList: [['男', '女']],
        sex: [],
        demo02: null,
        list: [
          { key: "0", value: "男" },
          { key: "1", value: "女" }
        ],
        trainClassId: '',
        departId: '',
        model: {
          departName: '请选择单位',
          industryId: [],
          workType: [],
          area: [],
          sex: [],
          username: '',
          telephone: '',
          idcard: ''
        },
        para: {
          id: '',
          userId: '',
          roleNameType: '2'//企业学员
        },
        industryList: [[{ name: 'ceshi', value: '1' }]],
        labelList: [],
        departName: '',
        showIndustry: false,
        departArea: []
      };
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    },
    mounted() {
      this.trainClassId = this.$route.query.id;
      this.para.userId = this.id;
      GetUserManagerInfo(this.para).then(
        response => {
          this.model = response;
          this.model.telephone = response.telePhone;
          this.model.username = response.userName;
          this.departName = response.enterPriseName;
          this.departId = response.enterPriseId;
          let tempList = [];

          response.industryList.forEach(item => {
            tempList.push({ name: item.codeContent, value: item.id });
          })
          this.$set(this.industryList, 0, tempList)
          this.model.trainClassId = this.trainClassId;
          if (!this.model.area) {
            this.model.area = [];

          } else {
            this.model.area = [this.model.city, this.model.area];
          }
          if (this.model.sex) {
            this.model.sex = [this.model.sex];
          } else {
            this.model.sex = [];
          }
          if (this.model.workType) {
            this.model.workType = [this.model.workType];
          } else {
            this.model.workType = [];
          }
          this.model.industryId = [response.industryId];
          getAreaList().then(response => {
            this.$nextTick(function () {
              this.cityLists = this.cityLists.concat(response);
              if (this.$route.query.departArea)
                this.model.area = this.$route.query.departArea.split(',');
            })

          });
          GetWorkTypeList({ industryId: response.industryId[0] }).then(
            response => {
              let tempList = [];
              response.forEach(item => {
                tempList.push({ name: item.labelName, value: item.id });
              })
              this.$set(this.workList, 0, tempList);
            }
          );
        }
      );


    },
    methods: {
      save() {
        if (!this.departId) {
          this.$vux.alert.show({
            content: '请先选择单位',
          });
          return;
        }
        if (this.model.workType.length == 0) {
          this.$vux.alert.show({
            content: '请先选择工种',
          });
          return;
        }
        if (!this.$refs.telephone.valid) {
          this.$vux.alert.show({
            content: '请输入手机号',
          });
          return;
        }
        if (!this.$refs.idcard.valid) {
          this.$vux.alert.show({
            content: '请输入身份证号',
          });
          return;
        }
        if (!this.$refs.username.valid) {
          this.$vux.alert.show({
            content: '请输入姓名',
          });
          return;
        }
        if (this.model.sex.length == 0) {
          this.$vux.alert.show({
            content: '请选择性别',
          });
          return;
        }
        let form = {
          IdentityFlag: '2',//0监管管理员、1系统内人员、2企业人员
          userName: this.model.username,
          stopUse: "1",
          telePhone: this.model.telephone,
          sex: this.model.sex[0],
          idcard: this.model.idcard,
          city: this.model.area[0],//市
          area: this.model.area[1],
          enterPriseName: this.departName,//单位名称
          enterPriseId: this.departId,//单位id
          workType: this.model.workType[0],//工种id
          industryId: this.model.industryId[0],
          departList: [],
          trainClassId: this.trainClassId,
          userId: this.id
        };
        applyTrainClass(form).then(
          response => {
            this.$vux.alert.show({
              content: '报名成功',
            });
            this.$router.push({ path: '/myTrainclass' });
          }
        );
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .student .weui-cells__title {
    height: 40px;
    font-size: 15px;
    color: #2269ff;
    font-weight: bold;
    line-height: 40px;
    width: 90%;
  }

  .student .weui-cell {
    height: 50px;
    font-size: 15px;
    line-height: 50px;
    margin-right: 15px;
    font-weight: bold;
  }

  .student .vux-no-group-title {
    margin-top: 0;
  }

  .student .weui-cell_select-after .weui-select {
    color: inherit !important;
    direction: rtl !important;
  }

  .student weui-input {
    color: #999999;
  }
</style>>
<style scoped>
  .main {
    padding: 0px 0px 25px 0px;
    text-align: left;
  }

  .btn {
    display: block;
    height: 45px;
    font-size: 17px;
    background-color: #2269ff;
    font-weight: bold;
    line-height: 45px;
    width: 230px;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin: auto;
  }

  .tips {
    padding: 15px 34px;
    color: #2269ff;
    font-size: 11px;
    line-height: 18px;
  }

  .btn1 {
    display: inline-block;
    height: 35px;
    font-size: 14px;
    background-color: #2269ff;
    line-height: 35px;
    width: 70px;
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    position: relative;
    left: 59%
  }

  .topDiv {
    padding: 10px 15px;
  }

    .topDiv label {
      color: #999999;
      font-size: 14px;
    }
</style>
